<template>
	<view class="content">
		<!-- 项目基本信息 -->
		
		<view class="h-box">
			<view class="part_item">
				<view class="part_head">
					<text class="cuIcon-locationfill" style="color: #f89725;margin-right: 20rpx; font-size: 32rpx;"></text>
					<text style="font-weight: 800;">施工地点</text>
				</view>
				<view class="part_content">
					<text>{{partList.address}}</text>
				</view>
			</view>
			<view class="part_item">
				<view class="part_head">
					<text class="cuIcon-edit" style="color: #42b5db;margin-right: 20rpx; font-size: 32rpx;"></text>
					<text style="font-weight: 800;">施工内容</text>
				</view>
				<view class="part_content">
					<text>{{partList.detail}}</text>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="cu-list menu margin-top" >
				<!-- 标题 -->
				<view class="cu-item">
					<view style="font-weight: 800;" class="content">
						<!-- <text class="cuIcon-text" style="color: #f36ed5;margin-right: 20rpx; font-size: 32rpx;"></text> -->
						<text >基本信息</text>
					</view>
					<view class="action">
						<text></text>
					</view>
				</view>
				<!-- 不会超出的选项 -->
				<!-- <view class="cu-item" @tap="toLook(i)" v-for="(i,j) in project" :key="j"> -->
					<!-- 右箭头 -->
				<view class="cu-item" @tap="toLook(i)" v-for="(i,j) in project" :key="j" :class="{arrow:i.isRight}">
					<view class="content">
						<!-- <text v-if="i.icon" :class="'cuIcon-'+i.icon" :style="[{color:i.iconColor},{fontWeight:800}]"></text> -->
						<text >{{i.title}}</text>
					</view>
					<view class="action" :style="[{color:i.color}]">
						<text>{{i.value}}</text>
					</view>
				</view>
				
				
			</view>
		</view>
		<!-- 项目主机 -->
		<view class="head">
			<view class="s-head">
				<text style="font-weight: 800;">项目主机</text>
				<text>{{partList.device_list.length}}台</text>
			</view>
			<swiper @change="changeDevice" :indicator-dots="true" :autoplay="false" :interval="5000" :duration="1000">
				<swiper-item v-for="(i,j) in partList.device_list" :key="j">
					<view class="s-item" >
						<view class="s-photo">
							<image v-if="i.device.device_img[0]" :src="i.device.device_img[0]" mode=""></image>
							<text v-else>图片加载出问题了~</text>
						</view>
						<view class="s-content">
							<!-- 设备名称，设备型号，月租金， -->
							<view class="s-content-item">
								<text>设备名称</text>
								<text>{{i.device.device_name}}</text>
							</view>
							<view class="s-content-item">
								<text>设备型号</text>
								<text>{{i.device.device_model}}</text>
							</view>
							<view class="s-content-item">
								<text>月租金</text>
								<text>{{i.device.rent}}</text>
							</view>
							<view v-if="isUser" class="s-content-item button" style="border: 0;">
								<view  :style="[{backgroundColor:o.background}]" @tap="toService(o)" v-for="(o,k) in menuList" :key="k">
									<text>{{o.name}}</text>
								</view>
								<picker mode="selector" range-key="title" :range="serviceList" @change="changType">
									<view style="background-color: #8799a3;">
										<text>更多</text>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import api from "../../../../network/index.js"
	export default {
		data() {
			return {
				order_device_id: 0, // 当前选中的主机
				project:{},
				partList:{},
				// 保修菜单
				menuList:[
					{
						name: "安装",
						background: "#0081ff",
						isSelect: true,
						type: 597
					},
					{
						name: "拆除",
						background: "#f37b1d",
						isSelect: true,
						type: 599
					},
					{
						name: "预埋",
						background: "#fbbd08",
						isSelect: true,
						type: 600
					}
				],
				obj: {},
				// 更多保修类型
				serviceList:[]
			};
		},
		computed:{
			isUser(){
				return this.$store.state.user.userInfo.isUser
			}
		},
		methods:{
			// 查看费用明细
			toLook(i){
				if(i.title == "费用明细"){
					uni.navigateTo({
						url: "../feedetail/feedetail"
					})
				} else if(i.title == "合同编号"){
					uni.navigateTo({
						url: "../../contract/contractdetail/contractdetail?id="+this.contract_lease_id
					})
				}
			},
			// 选中当前主机
			changeDevice(e){
				this.order_device_id = this.partList.device_list[e.detail.current].id
			},
			// 常规按钮发起保修单
			toService(i){
				uni.navigateTo({
					url: "../../towork/toworkadd/toworkadd?type="+i.type+"&device_id="+this.order_device_id
				})
			},
			// 选择器按钮发起保修单
			changType(e){
				if(this.serviceList[e.detail.value].title == "转借"){
					uni.navigateTo({
						url: "../../towork/toworkrent/toworkrent?device_id="+this.order_device_id
					})
				} else {
					uni.navigateTo({
						url: "../../towork/toworkadd/toworkadd?type="+this.serviceList[e.detail.value].id+"&device_id="+this.order_device_id
					})
				}
			},
			// 判断项目状态
			getStatus(status){
				if(status==0)return {value:"未开工",color: "#ffa23e"}
				if(status==1)return {value:"已租赁分派",color: "#ffa23e"}
				if(status==2)return {value:"已安装分派",color: "#ffa23e"}
				if(status==3)return {value:"已拆卸分派",color: "#ffa23e"}
				if(status==-1)return {value:"已完工",color: "#39b54a"}
			},
			// 获取保修类型
			getServiceList(){
				const t = this
				api.request({
					url: api.SERVICE_TYPE_LIST,
				}).then(res=>{
					if(res.data.code == "200"){
						this.serviceList = res.data.list.data.filter(res=>{
							return res.title != "安装" && res.title != "拆除"&&res.title != "预埋"
						})
					}else{
						api.error(res)
					}
				}).catch(err=>{
					api.error(err)
				})
			},
			// 获取项目详情
			getDetail(id){
				const t = this
				api.request({
					url: api.PROJECT_LIST,
					data:{
						id: "=,"+id
					}
				}).then(res=>{
					// console.log(res)
					if(res.data.code == "200"){
						// 详情页面需要展示的数据
						// 不需要换行字段：项目名称，开始时间，
						// 结束时间，产生费用，主机数，工程人数，
						// 订单编号，合同编号，施工状态，
						// 出租房
						// 可能换行字段：施工地点，项目描述，
						// 下级菜单：机器详情，工程人员详情
						let data = res.data.list.data[0]
						t.obj = data
						let status = t.getStatus(data.status)
						let obj = {
							name: {
								title: "项目名称",
								value: data.project_name,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#000000",
								isRight: false,
							},
							order_id: {
								title: "项目编号",
								value: data.order_num,
								icon: "",
								iconColor: "",
								color: "#555555",
								isRight: false,
							},
							
							start_time: {
								title: "启动时间",
								value: data.start_time,
								icon: "",
								iconColor: "",
								color: "#555555",
								isRight: false,
							},
							company: {
								title: "机器出租方",
								value: data.company.title?data.company.title:'',
								icon: "",
								iconColor: "",
								color: "#555555",
								isRight: false,
							},
							contract_id: {
								title: "合同编号",
								value: data.contractLease.contract_num,
								icon: "",
								iconColor: "",
								color: "#555555",
								isRight: true,
							},
							status: {
								title: "施工状态",
								value: status.value,
								icon: "",
								iconColor: "",
								color:status.color,
								isRight: false,
							},
							fee2: {
								title: "总租金",
								value: data.device_rent_total,
								icon: "",
								iconColor: "",
								color: "#555555",
								isRight: false,
							},
							fee3: {
								title: "总进场费",
								value: data.place_fee_totle,
								icon: "",
								iconColor: "",
								color: "#555555",
								isRight: false,
							},
							fee4: {
								title: "待付款",
								value: data.balance_due,
								icon: "",
								iconColor: "",
								color: "#555555",
								isRight: false,
							},
							fee5: {
								title: "已付款",
								value: data.receive,
								icon: "",
								iconColor: "",
								color: "#555555",
								isRight: false,
							},
							fee1: {
								title: "费用明细",
								value: "查看",
								icon: "",
								iconColor: "",
								color: "#aaa",
								isRight: true,
							},
						}
						this.project = obj
						this.contract_lease_id = data.contract_lease_id
						// console.log(data)
						// 超出部分
						this.partList.address = data.project_address?data.project_address:'未指定' // 项目地址
						this.partList.detail = data.detail?data.detail:'未填写' // 项目详情
						
						this.partList.device_list = data.ordeDevice // 获取主机列表
						this.partList.device_list.forEach((i,j)=>{
							this.partList.device_list[j].device.device_img = this.partList.device_list[j].device.device_img.split(",")
						})
						this.order_device_id = this.partList.device_list[0].id // 选中当前主机
						console.log(data)
					} else {
						console.log(res)
						uni.showToast({
							icon: "none",
							title: "意料之外的错误~"
						})
					}
				})
			}
		},
		onLoad(options) {
			// console.log(options)
			this.id = options.id
			this.getDetail(options.id)
			this.getServiceList()
		},
		onPullDownRefresh (){
			this.getDetail(this.id)
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
.h-box{
	margin: 20rpx;
	box-shadow: 4rpx 4rpx 8rpx #AAAAAA;
	background-color: #FFFFFF;
}
.head{
	background-color: #FFFFFF;
	margin: 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #AAAAAA;
	.s-head{
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
		font-size: 30rpx;
	}
}

swiper{
	height: 830rpx;
}
.s-content-item{
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
	font-size: 30rpx;
	&:hover{
		background-color: #F5F5F5;
	}
}
.s-item{
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	.s-photo{
		width: 100%;
		height: 400rpx;
		line-height: 400rpx;
		text-align: center;
		color: #AAAAAA;
		font-size: 28rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.button{
		display: flex;
		justify-content: space-around;
		view{
			color: #FFFFFF;
			background-color: #0081FF;
			padding: 5rpx 20rpx;
			font-size: 28;
			border-radius: 5rpx;
		}
	}
}
	
// .content{
// 	padding-bottom: 60rpx;
// }
.part_item{
	.part_head,.part_content{
		font-size: 30rpx;
		padding: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.cuIcon-title{
		margin-right: 20rpx;
	}
}
.box{
	margin: 0 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #AAAAAA;
}
.action{
	font-size: 28rpx;
}
.cu-item{
	&:hover{
		background-color: #F5F5F5;
	}
}
</style>
